:root {
  /* Element Plus 基础变量 */
  --el-color-primary: #409EFF;
  --el-color-success: #67C23A;
  --el-color-warning: #E6A23C;
  --el-color-danger: #F56C6C;
  --el-color-info: #909399;
  
  /* 全局背景和文字 */
  --el-bg-color: #ffffff;
  --el-text-color-primary: #303133;
  --el-text-color-regular: #606266;
  --el-border-color-base: #DCDFE6;
  
  /* 菜单和侧边栏 */
  --menu-bg-color: #ffffff;
  --menu-text-color: #333333;
  --menu-active-bg-color: #ecf5ff;
  --menu-hover-bg-color: #f5f7fa;
  
  /* 头部导航 */
  --header-bg-color: #ffffff;
  --header-text-color: #303133;
  --header-border-color: #e4e7ed;
}

.dark {
  /* Element Plus 基础变量 */
  --el-color-primary: #409EFF;
  --el-color-success: #67C23A;
  --el-color-warning: #E6A23C;
  --el-color-danger: #F56C6C;
  --el-color-info: #909399;
  
  /* 全局背景和文字 */
  --el-bg-color: #141414;
  --el-text-color-primary: #E5EAF3;
  --el-text-color-regular: #CFD3DC;
  --el-border-color-base: #4C4D4F;
  
  /* 菜单和侧边栏 */
  --menu-bg-color: #1d1e1f;
  --menu-text-color: #bdbdbd;
  --menu-active-bg-color: #0d1a2a;
  --menu-hover-bg-color: #263445;
  
  /* 头部导航 */
  --header-bg-color: #1d1e1f;
  --header-text-color: #E5EAF3;
  --header-border-color: #4C4D4F;
}

.blue {
  /* Element Plus 基础变量 */
  --el-color-primary: #409EFF;
  --el-color-success: #67C23A;
  --el-color-warning: #E6A23C;
  --el-color-danger: #F56C6C;
  --el-color-info: #909399;
  
  /* 全局背景和文字 */
  --el-bg-color: #f0f7ff;
  --el-text-color-primary: #303133;
  --el-text-color-regular: #606266;
  --el-border-color-base: #cce0ff;
  
  /* 菜单和侧边栏 */
  --menu-bg-color: #e6f1ff;
  --menu-text-color: #333333;
  --menu-active-bg-color: #d0e3ff;
  --menu-hover-bg-color: #e6f1ff;
  
  /* 头部导航 */
  --header-bg-color: #e6f1ff;
  --header-text-color: #303133;
  --header-border-color: #cce0ff;
}

.green {
  /* Element Plus 基础变量 */
  --el-color-primary: #67C23A;
  --el-color-success: #85ce61;
  --el-color-warning: #E6A23C;
  --el-color-danger: #F56C6C;
  --el-color-info: #909399;
  
  /* 全局背景和文字 */
  --el-bg-color: #f0f9eb;
  --el-text-color-primary: #303133;
  --el-text-color-regular: #606266;
  --el-border-color-base: #e1f3d8;
  
  /* 菜单和侧边栏 */
  --menu-bg-color: #e1f3d8;
  --menu-text-color: #333333;
  --menu-active-bg-color: #d1edc4;
  --menu-hover-bg-color: #e1f3d8;
  
  /* 头部导航 */
  --header-bg-color: #e1f3d8;
  --header-text-color: #303133;
  --header-border-color: #d1edc4;
}

:root, .dark, .blue, .green {
  background-color: var(--el-bg-color);
  color: var(--el-text-color-primary);
}